<template>
  <div>
    <div class="head-wrapper">
      <div class="head-title">{{ $t('diy.diy_order_title') }}</div>
      <div class="head-text">{{ $t('diy.diy_order_flow1') }}</div>
      <div class="head-text">{{ $t('diy.diy_order_flow2') }}</div>
      <div class="head-text">{{ $t('diy.diy_order_flow3') }}</div>
    </div>
    <div class="content-wrapper">
      <div class="content-item select-address">
        <shipping-address @on-change="onSelectAddr" ref="userShipRef">
          <div slot="title" class="title-wrap">
            <span class="title"><span class="star-icon">*</span>{{ $t('user.shippingAddress') }}</span>
          </div>
        </shipping-address>
      </div>
      <div class="form-label" style="margin-top: 24px;">
        <div class="title">{{ $t('diy.diy_label_text1') }}</div>
        <div class="sub-title">(* {{ $t('diy.diy_label_tips') }})</div>
      </div>
      <div class="form-sty">
        <div class="list-sty">
          <div class="line-sty">
            <div class="list-title"><span>*</span>{{ $t('diy.label_text1') }}</div>
            <Input v-model="form.detailUrl" :placeholder="$t('diy.text1_input_tip')" />
          </div>
          <div class="line-sty">
            <div class="list-title"><span>*</span> {{ $t('diy.label_text2') }}</div>
            <Input v-model="form.subject" :placeholder="$t('diy.text2_input_tip')" />
          </div>
          <div class="line-sty" style="align-items: baseline;margin-bottom: 12px;">
            <div class="list-title">{{ $t('diy.label_text3') }}</div>
            <div style="display: flex;flex-direction: column;">
              <div v-for="(item, index) in speParamItemList" :key="index">
                <div class="row-gutter">
                  <Input v-model="item.name" :placeholder="$t('diy.text3_input_lef')" style="width: 218px;" />
                  <img src="@/assets/images/user/concat.png" class="concat-icon" alt="">
                  <Input v-model="item.value" :placeholder="$t('diy.text3_input_rig')" style="width: 218px;" />
                  <div v-if="index != 0" @click="removeOrder(index)" class="iconfont icon-shanchu"></div>
                </div>
                <div class="text-tip" v-if="index == 0">{{ $t('diy.spe_msg_text') }}</div>
              </div>
            </div>
          </div>
          <div @click="addOrder" class="add-btn">{{ $t('diy.add_spec') }}</div>
          <div class="line-sty" style="align-items: start;">
            <div class="list-title">{{ $t('diy.level_label') }}</div>
            <Input v-model="form.remarks" :row="6" maxlength="1000" show-word-limit type="textarea"
              :placeholder="$t('diy.level_text')" class="textarea-sty" />
          </div>
          <div class="line-sty">
            <div class="list-title">{{ $t('diy.label_text4') }}</div>
            <div class="product-image">
              <div class="image-list">
                <div class="image-item" v-for="(item, index) in urlImageList" :key="index">
                  <img :src="item" alt="">
                  <img src="@/assets/images/user/delete.png" @click="removeImage(index)" class="delete-icon" alt="">
                </div>
              </div>
              <Upload v-if="urlImageList.length >= 5 ? false : true" :show-upload-list="false" :headers="{
                'X-Access-Token': userToken,
                'lang': 'en_US'
              }" biz="chat" :data="{
                biz: 'custom'
              }" name="file" :disabled="uploadLoading" :max-size="2048" :before-upload="handleBeforeUpload"
                :on-progress="onProgress" :on-success="onSuccess" :on-exceeded-size="handleMaxSize" :action="uploadURL">
                <div class="upload">
                  <t-loading v-if="uploadLoading"></t-loading>
                  <div v-else>
                    <img class="image" src="@/assets/images/public/upload_img.webp" alt="">
                    <span class="text">{{ $t('customOrder.hint6') }}</span>
                  </div>
                </div>
              </Upload>
            </div>
          </div>
          <div class="upload-tips">{{ $t('diy.tips_img_text') }}</div>
        </div>
      </div>
      <div class="form-label">
        <div class="title">{{ $t('diy.diy_label_text2') }}</div>
      </div>
      <div class="form-sty">
        <div class="list-sty">
          <div class="line-sty">
            <div class="list-title"><span>*</span> {{ $t('diy.label2_text') }}({{ $t('diy.label2_desc') }})</div>
            <Input v-model="form.unitPrice" :placeholder="$t('diy.input_default_text')" style="width: 215px;" />
          </div>
          <div class="upload-tips">{{ $t('diy.label2_input_text') }}</div>
          <div class="line-sty">
            <div class="list-title"><span>*</span> {{ $t('diy.label_quantity_text') }}</div>
            <InputNumber v-model="form.quantity" controls-outside size="large" :min="1"></InputNumber>
          </div>
          <div class="line-sty">
            <div class="list-title"><span>*</span> {{ $t('diy.label_freight_text') }}</div>
            <Input v-model="form.expressFee" :placeholder="$t('diy.input_tips_freight')" style="width: 215px;" />
          </div>
          <div class="upload-tips">{{ $t('diy.freight_tip_text') }}</div>
        </div>
      </div>
      <div class="tips-text">
        <Icon type="ios-information-circle" size="18" />
        <div>{{ $t('diy.diy_tips_text') }}</div>
      </div>
      <div class="bot-handel">
        <div>
          <div class="service-list">
            <Checkbox v-model="single">{{ $t('diy.agree_tip_text') }}
              <span @click="unBuyNotice">
                {{ $t('pay.prohibitedGoodsStatement') }}
              </span>
              <span @click="unFeeBtn">
                {{ $t('pay.disclaimer') }}
              </span>
            </Checkbox>
          </div>
          <div class="fee-about">
            <div class="left">
              <div class="head">{{ $t('diy.total_label') }}: CNY {{ totalAmount() }}</div>
              <div class="text">{{ $t('diy.other_text_tip') }}</div>
              <div class="text-btn" @click="linkBtn">{{ $t('estimation.shippingEstimate') }}></div>
            </div>
            <div class="right">
              <div class="submit-btn" @click="onCreateManual">{{ $t('pay.submitOrder') }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <rules-pop-one ref="oneRef" @closeEmit="close" @confirmEmit="confirm"></rules-pop-one>
  </div>
</template>
<script>
import { bigPlus, bigTimes } from "@/common/digital-computation";
import { validateAddressRequired, addressExamineRepetition } from "@/common/common";
import { commonUpload } from "@/api/sys";
import { createCustomize, createManual } from "@/api/order";
import ShippingAddress from "@/views/main/submit-parcel/shipping-address";
import TLoading from "@/components/t-loading";
import RulesPopOne from '../user/components/rules-pop-one.vue';
export default {
  components: { ShippingAddress, TLoading, RulesPopOne },
  data() {
    return {
      form: {
        detailUrl: sessionStorage.getItem('locSepSearch') ? sessionStorage.getItem('locSepSearch') : '',
        unitPrice: 10,//默认10
        quantity: 1,
        expressFee: 0
      },
      single: false,
      uploadLoading: false,
      urlImageList: [], // 上传图片完整链接用来展示
      imageList: [], // 上传的图片列表
      uploadURL: commonUpload(),
      userToken: localStorage.getItem('USER_TOKEN'),
      speParamItemList: [
        {
          name: '',
          value: ''
        }
      ],
      addressInfo: {}
    }
  },
  methods: {
    unBuyNotice() {
      window.open('https://100buy.com/notice/1775366859208065026', '_break')
    },
    unFeeBtn() {
      window.open('https://100buy.com/notice/1775336434196611074', '_break')
    },
    totalAmount() {
      let t = bigTimes(this.form.unitPrice, this.form.quantity);
      return bigPlus(t, this.form.expressFee);
    },
    linkBtn() {
      this.$router.push("/estimation")
    },
    onSelectAddr(info) {
      // 选择的地址
      this.addressInfo = info;
      this.form.addressId = info.id;
    },
    removeImage(index) {
      // 删除图片
      this.imageList.splice(index, 1);
      this.urlImageList.splice(index, 1);
    },
    onProgress() { },
    handleMaxSize(file) {
      this.uploadLoading = false;
      this.$Message.error(`File ${file.name} is too large, no more than 2M.`);
    },
    onSuccess(response) {
      // 上传成功
      this.uploadLoading = false;
      if (response.code == 0 || response.code == 200 || response.code == 201) {
        let data = response.result;
        this.urlImageList.push(data.url);
        this.imageList.push(data.path);
      } else {
        this.$Message.error(response.message);
      }
    },
    onError() {
      this.$Message.error(this.$t('user.uploadFailure'));
    },
    handleBeforeUpload() {
      this.uploadLoading = true;
    },
    // 创建自定义订单
    onCreateManual() {
      if (!this.single) {
        this.$Message.error(this.$t('pay.check'));
        return false;
      }
      if (!this.form.addressId) {
        this.$Message.error(this.$t('pay.selectShippingAddress'))
        return false;
      }
      if (!this.form.subject || !this.form.detailUrl) {
        this.$Message.error(this.$t('diy.msg_err_text'))
        return false;
      }

      // 地址必填校验
      if (!validateAddressRequired(this.addressInfo)) {
        this.$refs.oneRef.open(this.$t('user.no_data_pop_text'), this.$t('user.close'), this.$t('submitParcel.edit'), 2);
        return;
      }

      addressExamineRepetition(this.addressInfo, false, 'order').then(() => {
        console.log("通过");
        this.onDiyOrder();
      }).catch((err) => {
        console.log("失败", err);
        let str = '';
        if (err.val) {
          str = this.$t(err.text, { val: err.val });
        } else {
          str = this.$t(err.text);
        }
        this.$refs.oneRef.open(str, this.$t('submitParcel.edit'), this.$t('user.submitOrder'));
      })
    },
    onDiyOrder() {
      this.loading = true;
      this.form.imageList = this.imageList;//图片
      this.form.skuAttrEnum = this.speParamItemList;//规格
      createManual(this.form).then((res) => {
        this.loading = false;
        this.$Message.success(this.$t('pay.orderSuccessfully'));
        // 数据重置
        this.form.unitPrice = 10;
        this.form.quantity = 1;
        this.form.expressFee = 0;
        this.speParamItemList = [{ name: '', value: '' }];
        delete this.form.skuAttrEnum;
        this.totalAmount();
        this.$router.push(`/pay?id=${res.result}&&markText=diyRelevant`)
      }).catch(() => {
        this.loading = false;
      })
    },
    // 添加规格
    addOrder() {
      this.speParamItemList.push({
        name: '',
        value: ''
      })
    },
    // 删除当前规格
    removeOrder(index) {
      this.speParamItemList.splice(index, 1);
    },
    // 关闭 其他无操作，仅关闭
    confirm(e, v) {
      if (e == 1) {
        setTimeout(() => {
          this.onDiyOrder();
        }, 1000)
      } else {
        this.$refs.userShipRef.edit(this.addressInfo);
      }
    },
    close(e, v) {
      if (e == 1) {
        this.$refs.userShipRef.edit(this.addressInfo);
      }
    }
  }
}
</script>
<style lang="less" scoped>
.head-wrapper {
  padding: 35px 160px;
  background: #FF729A;

  .head-title {
    font-family: Open Sans, Open Sans;
    font-weight: bold;
    font-size: 50px;
    color: #FFFFFF;
    line-height: 59px;
    margin-bottom: 20px;
  }

  .head-text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 22px;
    color: #FFFFFF;
    line-height: 33px;
  }
}

.content-wrapper {
  min-height: 1080px;
  background: #FFFFFF;
  padding: 0 160px 40px 160px;

  .form-label {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 36px;

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32px;
      color: #1E1714;
      line-height: 40px;
    }

    .sub-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: #FF186B;
      line-height: 21px;
    }
  }

  .form-sty {

    .list-sty {

      .line-sty {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 32px;

        .list-title {
          min-width: 200px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #1E1714;
          line-height: 21px;
          white-space: nowrap;
          text-align: right;

          span {
            color: #FF186B;
          }
        }

        .product-image {
          display: flex;

          .image-list {
            display: flex;

            .image-item {
              position: relative;
              margin-right: 6px;
              width: 192px;
              height: 192px;
              border-radius: 4px;
              overflow: hidden;

              img {
                display: block;
                width: 100%;
                height: 100%;
              }

              .delete-icon {
                width: 24px;
                height: 24px;
                position: absolute;
                cursor: pointer;
                right: 0px;
                top: 0px;
              }
            }
          }

          .upload {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 192px;
            height: 192px;
            border-radius: 4px;
            opacity: 1;
            border: 2px dashed rgba(0, 0, 0, 0.15);
            padding: 0 20px;
            cursor: pointer;

            .image {
              display: block;
              width: 48px;
              margin: 0 auto;
            }

            .text {
              display: block;
              margin-top: 8px;
              text-align: center;
              color: @t-title-color;
              font-size: 14px;
            }
          }
        }

        .textarea-sty {
          height: 100%;

          :deep(.ivu-input) {
            min-height: 80px;
          }
        }

        .text-tip {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #767B93;
          line-height: 21px;
          margin-bottom: 12px;
        }

        .row-gutter {
          display: flex;
          align-items: center;
          gap: 20px;

          :deep(.ivu-input) {
            min-width: 218px;
            margin-bottom: 12px;
          }

          .concat-icon {
            width: 30px;
            margin-bottom: 12px;
          }

          .iconfont {
            color: #767B93;
            font-size: 32px;
            cursor: pointer;
          }
        }

        :deep(.ivu-input) {
          height: 54px;
          background: #F7F9FC;
          border-radius: 4px 4px 4px 4px;
          border: none;
          padding: 16px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          line-height: 21px;
        }

        :deep(.ivu-input-number-controls-outside .ivu-input-number-input) {
          border: none;
          text-align: center;
          background: #F7F9FC;
          border-radius: 4px 4px 4px 4px;
        }

        .upload-default {

          .upload-icon {
            width: 165px;
            height: 166px;
            border-radius: 4px 4px 4px 4px;
            border: 1px dashed #AEB0B9;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .icon {
              width: 38px;
              height: 38px;
              margin-bottom: 8px;
            }

            .icon-desc {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #AEB0B9;
              line-height: 16px;
            }
          }
        }
      }

      .add-btn {
        max-width: 542px;
        padding: 16px 0;
        font-family: Open Sans, Open Sans;
        font-weight: 600;
        font-size: 16px;
        color: #FF186B;
        line-height: 19px;
        text-align: center;
        border: 1px dashed #FF186B;
        cursor: pointer;
        margin-left: 220px;
        margin-bottom: 32px;
      }

      .upload-tips {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #74767F;
        line-height: 19px;
        margin-top: -20px;
        margin-left: 220px;
        margin-bottom: 40px;
      }
    }
  }

  .tips-text {
    padding: 16px 64px;
    background: #FFEAF0;
    border-radius: 8px 8px 8px 8px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #FF186B;
    line-height: 21px;
    margin-bottom: 40px;
    display: flex;
    gap: 12px;
  }

  .bot-handel {
    display: flex;
    justify-content: end;

    .service-list {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #AEB0B9;
      line-height: 20px;
      margin-bottom: 30px;
      text-align: right;

      span {
        color: #5CADF6;
        cursor: pointer;
      }
    }

    .fee-about {
      display: flex;
      gap: 40px;

      .left {
        .head {
          font-family: Open Sans, Open Sans;
          font-weight: bold;
          font-size: 32px;
          color: #FF186B;
          line-height: 38px;
          text-align: right;
        }

        .text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #AEB0B9;
          line-height: 16px;
          margin-top: 4px;
          text-align: right;
        }

        .text-btn {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #FF186B;
          line-height: 16px;
          margin-top: 4px;
          text-align: right;
          cursor: pointer;
        }
      }

      .right {
        .submit-btn {
          padding: 15px 18px;
          background: #FF186B;
          border-radius: 8px 8px 8px 8px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24px;
          color: #FFFFFF;
          line-height: 28px;
          cursor: pointer;
        }
      }
    }
  }

  .title-wrap {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 32px;
    color: #1E1714;
    line-height: 40px;

    .star-icon {
      color: #FF186B;
    }
  }
}
</style>